<template>
    <page-view class="flex flex-col">
        <title-bar>订单</title-bar>
        <div class="flex-1 overflow-auto bg-gray-100">
            <my-loading :isLoading="isFirstLoading" v-if="loginUserInfo">
                <PullRefresh v-model="isLoading" @refresh="refreshData">
                    <List :loading="isLoading" :finished="pageIndex >= pageCount" loading-text="正在加载数据"
                        finished-text="没有更多了" @load="nextPageOrder">
                        <TransitionGroup enter-active-class="animate__animated animate__slideInUp">
                            <div class="box-border mb-5 p-6 bg-white" v-for="item in orderInfoList" :key="item.id">
                                <div class="pb-2"><span class="font-bold text-[14px]">订单编号：</span>{{ item.id }}</div>
                                <div class="pb-2"><span class="font-bold text-[14px]">订单时间：</span>{{
                                        item.order_status === '未付款' ? formatDateTime(item.submit_time) :
                                            formatDateTime(item.pay_time)
                                }}
                                </div>
                                <div class="pb-2"><span class="font-bold text-[14px]">订单总数：</span>{{
                                        item.orderDetailList.length
                                }}
                                </div>
                                <div class="pb-2"><span class="font-bold text-[14px]">订单金额：</span>{{ item.order_money }}
                                </div>
                                <div class="pb-2"><span class="font-bold text-[14px]">订单状态：</span>
                                    <Steps :active="orderStatusMap.indexOf(item.order_status)">
                                        <Step>未付款</Step>
                                        <Step>已付款</Step>
                                        <Step>已发货</Step>
                                        <Step>交易完成</Step>
                                    </Steps>
                                </div>
                                <span class="font-bold text-[14px]">订单列表</span>
                                <div v-for="(foodItem, index) in item.orderDetailList" :key="foodItem.id">
                                    <div class="py-1 food-list">
                                        <div class="">
                                            {{ index + 1 }}.{{ foodItem.foodInfo.food_name }} × {{
                                                    foodItem.foodInfo.price
                                            }}<span>{{ foodItem.count }}</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="flex flex-row justify-between py-4">
                                    <Button class="w-[70px]" v-show="item.order_status === '未付款' ? 1 : 0" type="danger"
                                        size="mini" plain>取消订单</Button>
                                    <div class="flex w-full flex-row justify-end">
                                        <Button v-show="item.order_status === '未付款' ? 1 : 0"
                                            @click="item.order_status = '已付款'" type="primary" size="mini"
                                            plain>付款</Button>
                                        <Button v-if="item.order_status === '已发货'" type="success" size="mini"
                                            plain>评价</Button>
                                    </div>
                                </div>
                            </div>
                        </TransitionGroup>
                    </List>
                </PullRefresh>
            </my-loading>
            <p v-else class="text-center py-10 text-[14px]">你还没有登录，请先去
                <router-link class="text-primaryColor" :to="{ name: 'Login' }">登录</router-link>
            </p>
        </div>
    </page-view>
</template>

<script>
import { List, Step, Steps, Button, PullRefresh } from "vant"
import API from "@/utils/API";
import { formatDateTime } from "@/utils/DataTimeUtils";
import { mapGetters } from "vuex"
export default {
    name: "Order",
    data() {
        return {
            isFirstLoading: true,
            pageIndex: 1,
            pageCount: 0,
            orderInfoList: [],
            isLoading: false,
            orderStatusMap: ["未付款", "已付款", "已发货", "交易完成"]
        }
    },
    computed: {
        ...mapGetters(["loginUserInfo"])
    },
    // created() {
    //     if (this.loginUserInfo) {
    //         this.getMyOrderListByPage({ pageIndex: this.pageIndex });
    //     }
    // },
    // 这个是keep-alive以后的组件被重新激活以后
    activated() {
        // 如果用户已经登录了，并且之前还没请求数据，就请求数据
        if (this.loginUserInfo && this.isFirstLoading) {
            this.getMyOrderListByPage({ pageIndex: this.pageIndex });
        }
    },
    methods: {
        async getMyOrderListByPage({ pageIndex, isRefresh = false }) {
            this.isLoading = true;
            let result = await API.orderInfo.getMyOrderListByPage({ pageIndex });
            // console.log(result);
            this.pageCount = result.pageCount;
            if (isRefresh) {
                // 说明这里是刷新的数据，之前的数据可以直接替换掉
                this.orderInfoList = result.listData;
            }
            else {
                this.orderInfoList.push(...result.listData);
            }
            this.isLoading = false;
            this.isFirstLoading = false;
        },
        // 格式化时间
        formatDateTime,
        // 加载下一页
        nextPageOrder() {
            this.pageIndex++;
            this.getMyOrderListByPage({ pageIndex: this.pageIndex });
        },
        // 下拉刷新
        refreshData() {
            this.pageIndex = 1;
            this.getMyOrderListByPage({ pageIndex: this.pageIndex, isRefresh: true })
        }

    },
    components: {
        List,
        Step, Steps, Button, PullRefresh
    }
}
</script>

<style lang="scss" scoped>
.food-list {
    >div {
        @apply text-[12px] flex flex-row py-5 justify-between border-0 border-b border-dashed border-gray-300
    }
}
</style>